import React, {Component} from 'react';
import './CommentList.css';
import Context from '../../../context'
import {Button} from "element-react";

class CommentList extends Component{
    constructor (props) {
        super(props);
    }
    onDelList (index) {
        this.props.onDelList(index)
    }
    render () {
        const { comments } = this.props;
        return (
            <Context.Consumer>
                    {
                        theme => {
                            console.log(theme)
                          return (
                              <div className="comment-list-component" style={{backgroundColor: theme.bgColor,color: theme.color}}>
                                  <p className='comment-title'>留言列表 <span>（已有{comments.length}条留言）</span></p>
                                  <ul className='comment-ul'>
                                      {
                                          comments.map((comment, index) =>{
                                              return <li key={index} onClick={this.onDelList.bind(this,index)} className={theme.classnames}>{comment}</li>
                                          })
                                      }
                                  </ul>
                              </div>
                          )

                        }
                    }
            </Context.Consumer>

        )
    }
}

export default CommentList
